<script>

import {register, upload} from "@/api/request";

export default {
  name: "RegisterComponent",
  data() {
    return {
      form: {
        avatar: 'http://192.168.31.208:5000/wuyi-tea/e0df094f-dcd4-407e-87cc-5d7f32b67897.jpg'
      }
    };
  },
  methods: {
    handleAvatarSuccess(res, file) {
      this.imageUrl = URL.createObjectURL(file.raw);
    },
    async avatarUpload(file) {

      const formData = new FormData();

      formData.append('file',file)

      const res = await upload(formData)

      console.log(res)

      const url = res.data.data
      this.form.avatar = url
    }
  }
}
</script>

<template>
  <div>
    
<!--  头像  -->
      <el-upload
          class="avatar-uploader"
          :show-file-list="false"
          :on-success="handleAvatarSuccess"
          :before-upload="avatarUpload">
        <div class="user">
          <img :src="form.avatar" class="avatar">
        </div>
      </el-upload>


      <!-- <div style="margin-left: 50px"> -->

        <!--   昵称   -->
        <!-- <div class="text" style="margin-top: 20px">
          <label>昵称</label>
          <el-input v-model="registerInfo.nickname" placeholder="请输入昵称" class="input" resize="horizontal"></el-input>
        </div>

        <div class="text" style="margin-left: -25px">
          <label>用户名</label>
          <el-input v-model="registerInfo.username" placeholder="请输入内容" class="input" resize="horizontal"></el-input>
        </div>

        <div class="text">
          <label>密码</label>
          <el-input v-model="registerInfo.password" placeholder="请输入密码" show-password class="input"></el-input>
        </div>

        <div class="text" style="margin-left: -50px">
          <label>确认密码</label>
          <el-input v-model="registerInfo.confirmPassword" placeholder="请输入密码" show-password class="input"></el-input>
        </div>

      </div> -->

      <!--   注册按钮 -->
      <!-- <el-button type="primary" @click="register" style="margin-left: 150px">立即注册</el-button> -->

  </div>
</template>

<style scoped lang="scss">
.user {
  width:100px;
  height:100px;
  img{
    width:100%;
    height: 100%;
    border-radius:100%;
  }
}

</style>